<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .back {
        height: 100%;
        background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg);
        width: 3920px;
        /* margin-left: -2000px; */
        animation: back_move 20s infinite linear;
    }

    @keyframes back_move {
        from {
            margin-left: -1920px;
        }

        to {
            margin-left: 0;
        }
    }
    .wrap{
        height: 300px;
        width: 780px;
        position: absolute;
        top: 45%;
        left: 50%;
        margin-left: -300px;
    }
    .wrap > div{
        float: left;
    }
    .wk{
        width: 200px;
        height: 180px;
        overflow: hidden;
    }
    .wk div{
        background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png);
        height: 180px;
        width: 1600px;
        animation: wk_move 1s infinite steps(8);
    }
    @keyframes wk_move{
        from{
            margin-left: 0;
        }
        to{
            margin-left: -1600px;
        }
    }
    .ts{
        height: 240px;
        width: 170px;
        margin-top: -30px;
        overflow: hidden;
    }
    .ts div{
        width: 1360px;
        height: 240px;
        background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png);
        animation: ts_move 1s infinite steps(8);
    }
    @keyframes ts_move{
        from{
            margin-left: 0;
        }
        to{
            margin-left: -1360px;
        }
    }
    .bj{
        width: 200px;
        height: 180px;
        overflow: hidden;
    }
    .bj div{
        background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png);
        height: 180px;
        width: 1600px;
        animation: bj_move 1s infinite steps(8);
    }
    @keyframes bj_move{
        from{
            margin-left: 0;
        }
        to{
            margin-left: -1600px;
        }
    }
    .ss{
        width: 210px;
        height: 200px;
        overflow: hidden;
    }
    .ss div{
        background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png);
        height: 200px;
        width: 1680px;
        animation: ss_move 1s infinite steps(8);
    }
    @keyframes ss_move{
        from{
            margin-left: 0;
        }
        to{
            margin-left: -1680px;
        }
    }
</style>

<body>
    <!-- 背景图 -->
    <div class="back"></div>
    <!-- 人的容器 -->
    <div class="wrap">
        <div class="wk">
            <div></div>
        </div>
        <div class="ts">
            <div></div>
        </div>
        <div class="bj">
            <div></div>
        </div>
        <div class="ss">
            <div></div>
        </div>
    </div>
</body>

</html>